<template>
    <div>
        <h2>学校名称 {{ name }}</h2>
        <h3>学校地址 {{ props.location }}</h3>
        <h4>学校电话 {{ phone }}</h4>
        <Stu :stuData="stu" @changeAge="callBack"></Stu>
        <Stu :stuData="stu2" @changeAge="callBack2"></Stu>
    </div>
</template>

<script setup>
import Stu from './Stu.vue'
import { ref, isRef , reactive} from 'vue'

const props = defineProps(['name', 'location', 'phone'])

// const props = defineProps(
//     {
//         data:{
//             school:{
//                 name :String,
//                 location : String,
//                 phone : Number
//             },
//             stuData: {
//                 name : String,
//                 age : Number,
//                 id : Number
//             }
//         }
//     })

console.log("school 接收到的属性", props)
// 将数据设置成响应式的, 当数据发生改变, vue会自动更新数据绑定的Dom
let stu = ref({name:'李四', age:18, id:52132655})
// reactive() 函数将数据设置成响应式, 但参数只接受引用类型, 不接受普通数据类型
let stu2 =  reactive({name:'张三', age:20, id:41253685})

// 设置子组件的自定义事件
function callBack(params){
    console.log("接收到子组件通知", params);
    stu.value.age = 25
}

function callBack2(params){
    console.log("callBack2接收到子组件通知", params);
    stu2.age = 27
}
</script>

<style scoped>

</style>